// 1. react没有所谓的其他自定义的语法 一个组件就是一个js文件
// 2. 组件在当前就是一个函数
// 3. react写html模板的方法 - jsx语法

/* JSX - 如何使用表达式 
 语法: { js表达式 }
 常用表达式: 
   1. 变量
   2. 函数调用 渲染的是当前函数的返回值
   3. 四则运算
   4. js内置方法的执行
   5. 三元表达式 [频率非常高]
*/


/* JSX - 列表渲染
  语法: 数组方法map
  1. 在map方法中把想要循环多次的标签return出去即可在标签内部如果还想渲染数组对象
  中的某些字段继续使用{}进行识别渲染

  2. 如果要循环遍历的元素存在嵌套情况 建议使用小括号()进行包裹 模版更加清晰

  3. react这边的遍历依旧需要搭配一个独一无二的id 提升diff的性能 遍历的是哪个元素
  就给它添加一个key={id}

*/
const name = '柴柴老师'

function getAge () {
  return 18
}

const list = ['vue', 'react']

const age = 12


const taskList = [
  {
    id: 1,
    name: '学习react'
  },
  {
    id: 2,
    name: '复习vue'
  }
]

function App () {
  return (
    <div className="App">
      this is app
      {name}
      {getAge()}
      {1 + 2}
      {list.join('-')}
      {age > 18 ? '成年人' : '未成年'}
      {/* 渲染列表 */}
      <ul>
        {taskList.map(item => (
          <li key={item.id}>
            <span>{item.id}</span>
            <p>{item.name}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App
